Dynamic HTML part 6 - Filters and Transitions

This month in Publish and Be... (see PC Plus issue 139) I've been looking at Filters and Transitions, a toolbox full of visual special effects goodies supplied with Internet Explorer 4.0.  Filters let you display objects (text, images or whatever) with effects such as drop shadows and glowing 'halos', while transitions let you display visual changes (such as new text in a DIV or a new image file in an IMG) via wipes and dissolves, just like a presentation graphics program. Below you'll find builder pages which let you design filters and transitions interactively, plus ScreenCam Movies showing how to use filters and transitions. On my Wesbite you'll find demo pages showing filter and transition scripting in action. Have fun!  Paul Stephens.

This month's sample pages can only be viewed in Internet Explorer 4.0 or later. Click here to watch ScreenCam movies about this month's sample files (Win 95 required), or here to jump to a quick-pick list of this month's links. You can download all the demo pages from my website as a self-extracting .exe archive (400K), then view them offline from your hard disk - click here for details. The best reference source for filters and transitions is, as always, Microsoft's Internet Client SDK - you can view it online, or download it as a self-extracting file for local viewing (highly recommended).

Filters apply visual effects, such as drop shadows and greyscales, to objects. Filters are static (you set one, it stays the same until you alter it), but by changing their properties from JavaScript and VBScript routines you can achieve animated effects such as flashing halos and gradual fades. View the filter gallery (right) for a full-size view of the main filters, and check out my Interactive Filter Builder, which lets you try out combinations of filters (warning - some are weird!), and generates filter definition strings which you can copy and paste into your HTML page source.

On my website (requires Internet connection) you'll find a couple of extra filter tricks, including filters combined with transitions, and using the same filter twice on the same object.

Lights are a (very) special form of filter - just applying the 'light' filter to an object makes it go black(!), but you can then add ambient, cone and point light sources to illuminate it again. This might sound obscure, but in fact lights provide the most scope for creative authoring (and fun!) of all the filters. Try my Ambient and Cone Light Builder, which lets you design ambient and cone light sources and generates source code for you to cut and paste. The Light Point Builder is a similar designer for point sources, and also has some weird and wonderul (well, a bit wonderful but definitely weird!) demos of animations using lights and scripting.

On my website (requires Internet connection) check out How to Use Lights, which walks you through the multi-stage light builder process, plus the Director's Cut of the Light Point Builder, with animated light point demos including UFO Attack(!). For more light filter scripting demos, try shining spotlights on the clone kids (you'll see what I mean!), moving the spotlight around, applying light filters to an entire page and the random searchlight. Finally, for anyone who can't make it to Cornwall for 1999's total eclipse of the sun, there's a Solar Eclipse Simulator, showing just(ish!) how it will look over St. Michael's Mount, near Penzance. As always, this month's pages have commented HTML source explaining how the coding works, and the demo pages have linked 'how do they do that?' pages explaining the authoring techniques further .

Transitions bring presentation graphics-style wipes and dissolves to the Web. In the anything's-possible spririt of Dynamic HTML, IE 4's transition filters can be used to 'reveal' any visual changes to any filterable object, so as well as the obvious application of wiping one picture over another, you can  make text roll gracefully on and off the screen and even have entire data entry forms dissolve into view. My Transition Builder  lets you try out the 24 transition types, and generates the necessary HTML code for you to copy and paste into your page source.

On my website (requires Internet connection), to see a dissolve transition (my favourite) in action, check out basic dissolves - try to get a script error by multi-clicking, then check transitions with error-protection (plus a timer-delayed caption) to see how to solve the problem. The multi-object demo page highlights text transitions, and shows that the entire contents of a DIV, not just a single object, can be transitioned together. Check out the stopping a transition demo to see what happens when you call a transition fitler's .stop() method, and don't miss the appearance of the clone children page, in which every parent's nightmare -self-cloning kids - comes terrifyingly to life. As well as the 'revealTrans()' filter (wipes and dissolves), IE4 also offers blendTrans(), which cross-fades page content. This is the only filter I've had trouble with - it doesn't work on my Elonex P233 with ATI graphics - but it does work on others, so try the blend transitions demo to see if text and image blends work on your PC.

Quick-reference list of this month's links.

Dont' forget to view the source code of these pages (View..Source from IE 4's menus) to see more information about they were written.

On the SuperCD

Watch ScreenCam movies about using filters and transitions.
Filter gallery - examples of all the static filter effects on a single page.
Interactive Filter Builder - design your own filter combinations, cut and paste the DHTML code.
Ambient and Cone Light Builder - set ambient parameters, click to set cone positions, then cut and paste the code
Light Point Builder - Design your own point sources.
Transition Builder - try out the 24 transition types, copy and paste the code.

On My Website (requires Internet connection)

Download all the demo pages (below) as a self-extracting .exe (400K) for offline viewing.
Extra filter tricks - combining filters and transitions, and using the same filter twice on a single object
Light Point Builder - The director's cut, complete with animated point demos including UFO attack!
How to use the light filter - the order of play for applying the light filter and adding light sources.
Spotlight on the clone kids - scripting demo for simple interactive light controls.
Moving the spotlight around - it looks harder, but in fact it's still simple scripting.
Applying light filters to an entire page - put a complete page under the spotlight
The random searchlight - searches randomly, courtesy of a cone light and JavaScript.
Solar Eclipse Simulator - it'll happen in Cornwall next year (1999), but it's happening here now!
Basic dissolves - try to catch it out and get a script error!
Transitions with error-protection - this one won't be fooled!
Multi-object demo - entire DIVs, not just single objects, can be transitioned.
Stopping a transition - using the Stop() method - you may want to do this, but check out the effect first.
Appearance of the clone children - it's a nightmare, but it's fun too.
Blend transitions demo - will they work on your PC?